﻿import QtQuick 2.12
import QtGraphicalEffects 1.0

// 自封装滚动条
// 并不想看QML的滚动条咋封的……

Rectangle {

    id: root


    property real r1: 0
    property real r2: 1

    property color mainColor: "#AAA"

    property int direct: (height >= width) ? 1 : 0

    property real itemLength: direct === 1 ? height : width
    property real itemWidth: direct === 1 ? width : height

    border.color: mainColor

    signal rangeChanged()


    // 上下/左右 的两个小三角形
    Rectangle{
        id: button_small
        color: mainColor
        height: direct === 1 ? root.width : root.height
        width: height
        Image {
            mipmap: true
            anchors.centerIn: parent
            height: parent.height * 0.6
            width: parent.width * 0.6
            source: direct===1 ? "qrc:/picture/triangle_up_1.png" : "qrc:/picture/triangle_left_1.png"
        }
        MouseArea{
            cursorShape: "PointingHandCursor"
            anchors.fill: parent
            onClicked: {
                var gapR = r2 - r1
                r1 = Math.max(0, r1 - 0.1)
                r2 = r1 + gapR
                root.rangeChanged()
            }
        }
    }
    Rectangle{
        id: button_large
        color: mainColor
        height: direct === 1 ? root.width : root.height
        width: height
        anchors.right: root.right
        anchors.bottom: root.bottom
        Image {
            mipmap: true
            anchors.centerIn: parent
            height: parent.height * 0.6
            width: parent.width * 0.6
            source: direct===1 ? "qrc:/picture/triangle_down_1.png" : "qrc:/picture/triangle_right_1.png"
        }
        MouseArea{
            cursorShape: "PointingHandCursor"
            anchors.fill: parent
            onClicked: {
                var gapR = r2 - r1
                r2 = Math.min(1, r2 + 0.1)
                r1 = r2 - gapR
                root.rangeChanged()
            }
        }
    }

    Rectangle{       // 滚动条区域
        id: area_bar
        width: root.width - (direct === 0 ? (2*itemWidth+2) : 2)
        height: root.height - (direct === 1 ? (2*itemWidth+2) : 2)
        x: direct === 1 ? 1 : itemWidth+1
        y: direct === 0 ? 1 : itemWidth+1

        // 滚动条自己
        Rectangle{
            id: bar
            color: mainColor
            x: {
                if(direct === 1){       // 竖向滚动条，x = 1
                    return 1
                }else{                  // 横向滚动条
                    return area_bar.width * r1
                }
            }

            y: {
                if(direct === 1){       // 竖向滚动条
                    return area_bar.height * r1
                }else{                  // 横向滚动条
                    return 1
                }
            }

            height: {
                if(direct === 1){       // 竖向滚动条，高度跟随range
                    return area_bar.height * (r2-r1)
                }else{                  // 横向滚动条，固定高度
                    return area_bar.height - 2
                }
            }

            width: {
                if(direct === 1){       // 竖向滚动条，固定高度
                    return area_bar.width - 2
                }else{                  // 横向滚动条
                    return area_bar.width * (r2-r1)
                }
            }
        }
        MouseArea{
            property real startX
            property real startY
            property bool isPressed: false
            hoverEnabled: true
            anchors.fill: bar
            focus: true
            preventStealing: true
            onPressed: {
                isPressed = true
                startX = mouseX
                startY = mouseY
            }
            onPositionChanged: {
                if(!isPressed)  return
                var movePercent
                if(direct === 0){
                    movePercent = (mouseX-startX) / area_bar.width

                }else{
                    movePercent = (mouseY-startY) / area_bar.height
                }
                var gapR = r2 - r1
                r2 = Math.max(gapR, Math.min(1, movePercent+r2))
                r1 = r2 - gapR
                root.rangeChanged()

            }
            onReleased: {
                isPressed = false
            }
        }
    }



}
